
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>CSS <span class="color_h1">实例</span></h1>
<h2 class="tutheader">CSS背景</h2>
<p><a  rel="noopener" target="_blank">设置页面的背景颜色</a></p>
<p><a  rel="noopener" target="_blank">设置不同元素的背景颜色</a></p>
<p><a  rel="noopener" target="_blank">设置一个图像作为页面的背景</a></p>
<p><a  rel="noopener" target="_blank">错误的背景图片</a></p>
<p><a  rel="noopener" target="_blank">如何在水平方向重复背景图像</a></p>
<p><a  rel="noopener" target="_blank">如何定位背景图像</a></p>
<p><a  rel="noopener" target="_blank">一个固定的背景图片（这个图片不会随页面的其余部分滚动）</a></p>
<p><a  rel="noopener" target="_blank">声明背景属性</a></p>
<p><a  rel="noopener" target="_blank">高级的背景例子</a></p>
<p><a ><b>背景属性的解释</b></a></p>
<h2 class="tutheader">CSS文本</h2>
<p><a  rel="noopener" target="_blank">设置不同元素的文本颜色</a></p>
<p><a  rel="noopener" target="_blank">文本对齐</a></p>
<p><a  rel="noopener" target="_blank">移除链接下划线</a></p>
<p><a  rel="noopener" target="_blank">装饰文字</a></p>
<p><a  rel="noopener" target="_blank">控制文本中的字母</a></p>
<p><a  rel="noopener" target="_blank">缩进文本</a></p>
<p><a  rel="noopener" target="_blank">指定了字符之间的空间</a></p>
<p><a  rel="noopener" target="_blank">指定了行与行之间的空间</a></p>
<p><a  rel="noopener" target="_blank">设置元素的文本方向</a></p>
<p><a  rel="noopener" target="_blank">增加单词之间的空格</a></p>
<p><a  rel="noopener" target="_blank">在一个元素内禁用文字换行</a></p>
<p><a  rel="noopener" target="_blank">内部文字图像的垂直对齐</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>Text属性的解释</b></a></p>
<h2 class="tutheader">CSS的字体</h2>
<p><a  rel="noopener" target="_blank">设置文本的字体</a></p>
<p><a  rel="noopener" target="_blank">设置字体大小</a></p>
<p><a  rel="noopener" target="_blank">用px设置的字体的大小</a></p>
<p><a  rel="noopener" target="_blank">用em设置的字体的大小</a></p>
<p><a  rel="noopener" target="_blank">用百分比和em设置字体的大小</a></p>
<p><a  rel="noopener" target="_blank">设置字体样式</a></p>
<p><a  rel="noopener" target="_blank">设置字体的异体</a></p>
<p><a  rel="noopener" target="_blank">设置字体的粗细</a></p>
<p><a  rel="noopener" target="_blank">在一个声明的所有字体属性</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>Font属性的解释</b></a></p>
<h2 class="tutheader">CSS链接</h2>
<p><a  rel="noopener" target="_blank">为访问/未访问链接添加不同的颜色</a></p>
<p><a  rel="noopener" target="_blank">在链接上使用文本装饰</a></p>
<p><a  rel="noopener" target="_blank">指定链接的背景颜色</a></p>
<p><a  rel="noopener" target="_blank">超链接添加其他样式</a></p>
<p><a  rel="noopener" target="_blank">高级 - 创建链接框</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>链接属性的解释</b></a></p>
<h2 class="tutheader">CSS列表</h2>
<p><a  rel="noopener" target="_blank">列表中所有不同的列表项标记</a></p>
<p><a  rel="noopener" target="_blank">设置作为列表项标记的图像</a></p>
<p><a  rel="noopener" target="_blank">使用跨浏览器解决方案设置一个列表项标记的图像</a></p>
<p><a  rel="noopener" target="_blank">在一个声明中的所有列表属性</a></p>
<p><a  rel="noopener" target="_blank">css 移除列表项 li 默认样式</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>列表属性的解释</b></a></p>
<h2 class="tutheader">CSS表格</h2>
<p><a  rel="noopener" target="_blank">指定一个表的Th，TD元素和黑色边框</a></p>
<p><a  rel="noopener" target="_blank">使用border-collapse</a></p>
<p><a  rel="noopener" target="_blank">指定表格的宽度和高度</a></p>
<p><a  rel="noopener" target="_blank">设置内容的水平对齐方式（文本对齐）</a></p>
<p><a  rel="noopener" target="_blank">设置内容的垂直对齐（垂直对齐）</a></p>
<p><a  rel="noopener" target="_blank">指定TH和TD元素的填充</a></p>
<p><a  rel="noopener" target="_blank">指定表格边框的颜色</a></p>
<p><a  rel="noopener" target="_blank">设置表格标题的位置</a></p>
<p><a  rel="noopener" target="_blank">创建一个奇特的表</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>表格属性的解释</b></a></p>
<h2 class="tutheader">CSS盒模型</h2>
<p><a  rel="noopener" target="_blank">指定元素的总宽度为250像素</a></p>
<p><a  rel="noopener" target="_blank">使用跨浏览器的解决方案指定元素的总宽度为250像素的 </a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>盒模型的解释</b></a></p>
<h2 class="tutheader">CSS边框</h2>
<p><a  rel="noopener" target="_blank">设置四个边框的宽度</a></p>
<p><a  rel="noopener" target="_blank">设置上边框的宽度</a></p>
<p><a  rel="noopener" target="_blank">设置底部边框的宽度</a></p>
<p><a  rel="noopener" target="_blank">设置左边框的宽度</a></p>
<p><a  rel="noopener" target="_blank">设置右边框的宽度</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank">设置四个边框的样式</a></p>
<p><a  rel="noopener" target="_blank">设置上边框的样式</a></p>
<p><a  rel="noopener" target="_blank">设置下边框的样式</a></p>
<p><a  rel="noopener" target="_blank">设置左边框的样式</a></p>
<p><a  rel="noopener" target="_blank">设置右边框的样式</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank">设置四个边框的颜色</a></p>
<p><a  rel="noopener" target="_blank">设置上边框的颜色</a></p>
<p><a  rel="noopener" target="_blank">设置下边框的颜色</a></p>
<p><a  rel="noopener" target="_blank">设置左边框的颜色</a></p>
<p><a  rel="noopener" target="_blank">设置右边框的颜色</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank">在一个声明中的所有边框属性</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank">每边设置不同的边框</a></p>
<p><a  rel="noopener" target="_blank">在一个声明中的所有顶部边框属性</a></p>
<p><a  rel="noopener" target="_blank">在一个声明中的所有下边框属性</a></p>
<p><a  rel="noopener" target="_blank">在一个声明中的所有左边框属性</a></p>
<p><a  rel="noopener" target="_blank">在一个声明中的所有右边框属性</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>边框属性的解释</b></a></p>
<h2 class="tutheader">CSS轮廓</h2>
<p><a  rel="noopener" target="_blank">围绕一个元素（outline），绘制一条线</a></p>
<p><a  rel="noopener" target="_blank">设置轮廓的样式</a></p>
<p><a  rel="noopener" target="_blank">设置轮廓颜色</a></p>
<p><a  rel="noopener" target="_blank">设置轮廓的宽度</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>轮廓属性的解释</b></a></p>
<h2 class="tutheader">CSS边距</h2>
<p><a  rel="noopener" target="_blank">指定一个元素的边距</a></p>
<p><a  rel="noopener" target="_blank">边距缩写属性</a></p>
<p><a  rel="noopener" target="_blank">文本顶部边距设置的值使用厘米</a></p>
<p><a  rel="noopener" target="_blank">使用百分比值设置文本的底部边缘</a></p>
<p><a  rel="noopener" target="_blank">使用厘米值设置文本的左边距</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>Margin属性的解释</b></a></p>
<h2 class="tutheader">CSS填充</h2>
<p><a  rel="noopener" target="_blank">设置元素的左部填充</a></p>
<p><a  rel="noopener" target="_blank">设置元素的右部填充</a></p>
<p><a  rel="noopener" target="_blank">设置元素的顶部填充</a></p>
<p><a  rel="noopener" target="_blank">设置元素的底部填充</a></p>
<p><a  rel="noopener" target="_blank">在一个声明中的所有填充属性</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>padding属性的解释</b></a></p>
<h2 class="tutheader">CSS分组和嵌套</h2>
<p><a  rel="noopener" target="_blank">组选择器</a></p>
<p><a  rel="noopener" target="_blank">嵌套选择器</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>分组和嵌套解释</b></a></p>
<h2 class="tutheader">CSS尺寸</h2>
<p><a  rel="noopener" target="_blank">使用像素值设置图像的高度</a></p>
<p><a  rel="noopener" target="_blank">使用百分比设置图像的高度</a></p>
<p><a  rel="noopener" target="_blank">使用像素值来设置元素的宽度</a></p>
<p><a  rel="noopener" target="_blank">使用百分比来设置元素的宽度</a></p>
<p><a  rel="noopener" target="_blank">设置元素的最大高度</a></p>
<p><a  rel="noopener" target="_blank">使用像素值设置元素的最大宽度</a></p>
<p><a  rel="noopener" target="_blank">使用百分比来设置元素的最大宽度</a></p>
<p><a  rel="noopener" target="_blank">设置元素的最低高度</a></p>
<p><a  rel="noopener" target="_blank">使用像素值来设置元素的最小宽度</a></p>
<p><a  rel="noopener" target="_blank">使用百分比来设置元素的最小宽度</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>尺寸属性的解释</b></a></p>
<h2 class="tutheader">CSS显示</h2>
<p><a  rel="noopener" target="_blank">如何隐藏一个元素(visibility:hidden)</a></p>
<p><a  rel="noopener" target="_blank">如何不显示元素(display:none)</a></p>
<p><a  rel="noopener" target="_blank">如何显示一个元素的内联元素</a></p>
<p><a  rel="noopener" target="_blank">如何显示一个元素的块元素</a></p>
<p><a  rel="noopener" target="_blank">如何使用表格的collapse属性</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>Display属性的解释</b></a></p>
<h2 class="tutheader">CSS定位</h2>
<p><a  rel="noopener" target="_blank">元素相对浏览器窗口的位置</a></p>
<p><a  rel="noopener" target="_blank">元素的相对定位</a></p>
<p><a  rel="noopener" target="_blank">元素的绝对定位</a></p>
<p><a  rel="noopener" target="_blank">重叠的元素</a></p>
<p><a  rel="noopener" target="_blank">设置元素的形状</a></p>
<p><a  rel="noopener" target="_blank">如何使用滚动条来显示元素内溢出的内容</a></p>
<p><a  rel="noopener" target="_blank">如何设置浏览器自动溢出处理</a></p>
<p><a  rel="noopener" target="_blank">使用像素值设置图像的顶部</a></p>
<p><a  rel="noopener" target="_blank">使用像素值设置图像的底部</a></p>
<p><a  rel="noopener" target="_blank">使用像素值设置图像的左边</a></p>
<p><a  rel="noopener" target="_blank">使用像素值设置图像的右边</a></p>
<p><a  rel="noopener" target="_blank">更改光标</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>定位属性的解释</b></a></p>
<h2 class="tutheader">CSS浮动</h2>
<p><a  rel="noopener" target="_blank">简单的使用float属性</a></p>
<p><a  rel="noopener" target="_blank">为图像添加边框和边距并浮动到段落的左侧</a></p>
<p><a  rel="noopener" target="_blank">标题和图片向右侧浮动</a></p>
<p><a  rel="noopener" target="_blank">让段落的第一个字母浮动到左侧</a></p>
<p><a  rel="noopener" target="_blank">使用float属性创建一个图片廊</a></p>
<p><a  rel="noopener" target="_blank">开启float - clear属性</a></p>
<p><a  rel="noopener" target="_blank">创建一个水平菜单</a></p>
<p><a  rel="noopener" target="_blank">创建一个没有表格的网页</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>Float属性的解释</b></a></p>
<h2 class="tutheader">CSS对齐元素</h2>
<p><a  rel="noopener" target="_blank">使用margin的中间调整</a></p>
<p><a  rel="noopener" target="_blank">左/右位置对齐</a></p>
<p><a  rel="noopener" target="_blank">使用跨浏览器解决方案，设置左/右位置对齐</a></p>
<p><a  rel="noopener" target="_blank">左/右对齐，浮动</a></p>
<p><a  rel="noopener" target="_blank">使用跨浏览器解决方案，设置左/右位置对齐，浮动</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>对齐属性解释</b></a></p>
<h2 class="tutheader">CSS生成的内容</h2>
<p><a  rel="noopener" target="_blank">把括号内的URL用content属性插入到每个链接后面</a></p>
<p><a  rel="noopener" target="_blank">章节和分节的编号是"第1节"，"1.1"，"1.2"等</a></p>
<p><a  rel="noopener" target="_blank">quotes 属性指定了引号</a></p>
<h2 class="tutheader">CSS伪类</h2>
<p><a  rel="noopener" target="_blank">添加不同颜色的超链接</a></p>
<p><a  rel="noopener" target="_blank">给超链接添加其他样式</a></p>
<p><a  rel="noopener" target="_blank">使用：焦点</a></p>
<p><a  rel="noopener" target="_blank">:first-child - 匹配了第一个 p 元素</a></p>
<p><a  rel="noopener" target="_blank">:first-child - 匹配了 p 元素中的第一个 i 元素</a></p>
<p><a  rel="noopener" target="_blank">:first-child - 匹配了第一个p元素中的所有I元素</a></p>
<p><a  rel="noopener" target="_blank">使用:lang</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>伪类的解释</b></a></p>
<h2 class="tutheader">CSS伪元素</h2>
<p><a  rel="noopener" target="_blank">把文本的第一个字母设为特殊的字母</a></p>
<p><a  rel="noopener" target="_blank">把第一行文字设置为特殊</a></p>
<p><a  rel="noopener" target="_blank">把第一行文字的第一个字母设置为特殊</a></p>
<p><a  rel="noopener" target="_blank">使用：在一个元素之前插入一些内容</a></p>
<p><a  rel="noopener" target="_blank">使用：在一个元素之后插入一些内容</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>伪元素的解释</b></a></p>
<h2 class="tutheader">CSS导航栏</h2>
<p><a  rel="noopener" target="_blank">垂直导航栏的全样式</a></p>
<p><a  rel="noopener" target="_blank">水平导航栏的全样式</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>导航栏的解释</b></a></p>
<h2 class="tutheader">CSS图片廊</h2>
<p><a  rel="noopener" target="_blank">图片廊</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>图片廊解释</b></a></p>
<h2 class="tutheader">CSS图像的不透明度</h2>
<p><a  rel="noopener" target="_blank">创建透明图像 - 鼠标悬停效果</a></p>
<p><a  rel="noopener" target="_blank">创建一个背景图像与文本的透明框</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>图像的不透明度解释</b></a></p>
<h2 class="tutheader">CSS图像拼合</h2>
<p><a  rel="noopener" target="_blank">图像拼合</a></p>
<p><a  rel="noopener" target="_blank">图像拼合-导航列表</a></p>
<p><a  rel="noopener" target="_blank">悬停效果与图像拼合</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>图像拼合解释</b></a></p>
<h2 class="tutheader">CSS属性选择器</h2>
<p><a  rel="noopener" target="_blank">选择具有title属性的元素</a></p>
<p><a  rel="noopener" target="_blank">选择标题=一个特定值的元素</a></p>
<p><a  rel="noopener" target="_blank">选择标题=一个特定值的元素(使用（~）分隔属性和值)</a></p>
<p><a  rel="noopener" target="_blank">选择标题=一个特定值的元素(使用（|）分隔属性和值)</a></p>
<p> </p>
<p><a  rel="noopener" target="_blank"><b>属性选择器解释</b></a></p>
<hr/>
<h2>CSS 应用实例</h2>
<ul>
<li><a  rel="noopener" target="_blank">CSS 加载进度条</a></li>
<li><a  rel="noopener" target="_blank">CSS 分页样式</a></li>
<li><a  rel="noopener" target="_blank">CSS 进度条</a></li>
<li><a  rel="noopener" target="_blank">CSS  提示信息实例</a></li>
<li><a  rel="noopener" target="_blank">CSS 文字覆盖图像悬停效果</a></li>
<li><a  rel="noopener" target="_blank">CSS 文字覆盖图像悬停效果 - 从上至下</a></li>
<li><a  rel="noopener" target="_blank">CSS 文字覆盖图像悬停效果 – 从下至上</a></li>
<li><a  rel="noopener" target="_blank">CSS 文字覆盖图像悬停效果 – 从右至左</a></li>
<li><a  rel="noopener" target="_blank">CSS 文字覆盖图像悬停效果 – 从左至右</a></li>
<li><a  rel="noopener" target="_blank">CSS 文字覆盖图像悬停效果 – 淡入透明</a></li>
<li><a  rel="noopener" target="_blank">CSS  垂直按钮组</a></li>
<li><a  rel="noopener" target="_blank">CSS 按钮组</a></li>
<li><a  rel="noopener" target="_blank">CSS Loading(加载) 动画效果</a></li>
<li><a  rel="noopener" target="_blank">CSS Loading(加载) 动画效果2</a></li>
<li><a  rel="noopener" target="_blank">CSS Loading(加载) 动画效果3</a></li>
<li><a  rel="noopener" target="_blank">CSS Loading(加载) 动画效果4</a></li>
<li><a  rel="noopener" target="_blank"> CSS 动态搜索框</a></li>
<li><a  rel="noopener" target="_blank"> CSS 用户信息卡片</a></li>
<li><a  rel="noopener" target="_blank"> CSS 卡片样式</a></li>
<li><a  rel="noopener" target="_blank">CSS 上一页、下一页样式</a></li>
<li><a  rel="noopener" target="_blank"> CSS 各种提示信息框</a></li>
<li><a  rel="noopener" target="_blank">CSS 三种价格表样式</a></li>
<li><a  rel="noopener" target="_blank"> CSS 开关样式</a></li>
<li><a  rel="noopener" target="_blank"> CSS 让 DIV 水平居中显示</a></li>
<li><a  rel="noopener" target="_blank">CSS 上下左右四个方向箭头</a></li>
<li><a  rel="noopener" target="_blank">CSS 反馈信息表单</a></li>
<li><a  rel="noopener" target="_blank"> CSS font-awesome 图标菜单栏</a></li>
<li><a  rel="noopener" target="_blank"> CSS 顶部导航样式实例</a></li>
<li><a  rel="noopener" target="_blank"> CSS  便签样式效果</a></li>
<li><a  rel="noopener" target="_blank">CSS 水平滚动菜单</a></li>
<li><a  rel="noopener" target="_blank">CSS 垂直菜单</a></li>
<li><a  rel="noopener" target="_blank">CSS 垂直滚动菜单</a></li>
<li><a  rel="noopener" target="_blank">CSS 固定菜单栏</a></li>
<li><a  rel="noopener" target="_blank">CSS 响应式登陆表单</a></li>
<li><a  rel="noopener" target="_blank">CSS 固定底部菜单栏</a></li>
<li><a  rel="noopener" target="_blank">CSS 下拉菜单</a></li>
<li><a  rel="noopener" target="_blank">CSS 下拉内容的对齐方式</a></li>
<li><a  rel="noopener" target="_blank">CSS 导航条下拉菜单</a></li>
<li><a  rel="noopener" target="_blank">CSS 带搜索框的导航栏</a></li>
<li><a  rel="noopener" target="_blank">CSS 带搜索导航栏 - 带提交按钮</a></li>
<li><a  rel="noopener" target="_blank">CSS 带搜索导航栏 - 带提搜索图标</a></li>
<li><a  rel="noopener" target="_blank">CSS 固定左侧导航栏</a></li>
<li><a  rel="noopener" target="_blank">CSS 固定左侧导航栏 – 高度自适应</a></li>
<li><a  rel="noopener" target="_blank">HTML/CSS/JS 联系我们表单模板(带百度地图)</a></li>
<li><a  rel="noopener" target="_blank">CSS 设计一个网页</a></li>
</ul>
<blockquote><p>更多实例：<a  rel="noopener" target="_blank">https://c.runoob.com/examples/</a></p></blockquote>
<div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    